<template>
  <van-popup v-model="show" position="bottom" :style="{ height: '100%' }">
    <div class="page">
      <van-nav-bar title="申请记录" left-arrow @click-left="$router.go(-1)"/>
      <van-tabs v-model="page.type" @change="searchFunc" color="#517df1" title-active-color="#517df1" title-inactive-color="#9d9d9d">
        <van-tab v-for="(item, index) in nav" :key="index" :name="item.value">
          <template #title> 
            <div style="font-size: 14px; text-align: center;">{{ item.label }}</div>
          </template>
        </van-tab>
      </van-tabs>
      <div class="page-content" style="margin-top: 0.27rem; background: #fff;">
        <div class="list-item" v-for="(item, index) in list" :key="index">
          <template v-if="item.type == 1">
            <div class="list-group flex-row" style="padding-top: 0.25rem; padding-bottom: 0.25rem;">
              <div class="flex-row">
                <span class="font-black" style="font-size: 14px;">编号：{{ item.sn }}</span>
              </div>
            </div>
            <div class="list-group justify">
              <div class="list-row">
                <span class="label-text">时间</span>
                <span>{{ item.createTime }}</span>
              </div>
              <div class="list-row">
                <span class="label-text">来源</span>
                <span>{{ item.inReason }}</span>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="list-group flex-row" style="padding-top: 0.25rem; padding-bottom: 0.25rem;">
              <div class="flex-row">
                <span class="font-black" style="font-size: 14px;">编号：{{ item.sn }}</span>
              </div>
            </div>
            <div class="list-group justify">
              <div class="list-row">
                <span class="label-text">时间</span>
                <span>{{ item.createTime }}</span>
              </div>
              <div class="list-row">
                <span class="label-text">来源</span>
                <span>{{ item.inReason }}</span>
              </div>
              <div class="list-row" style="height: 100px; align-items: flex-start; line-height: 0.75rem;">
                <span class="label-text">二维码</span>
                <div style="width: 100px; height: 100px; background: red;" :id="'qrcode' + index"></div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script>
export default {
  data() {
    return {
      show: true,

      nav: [
        { label: '机柜', value: 1 },
        { label: '充电宝', value: 2 }
      ],

      page: {
        type: 1,
        page: 1,
        size: 10,
        loading: false,
        finished: false
      },

      list: []
    };
  },
  methods: {
    searchFunc() {
      this.page = { ...this.page, page: 1, size: 10, loading: false, finished: false };
      this.list = [];
      this.getList();
    },
    getList() {
      let sPage = JSON.parse(JSON.stringify(this.page));
      let { page, size, type } = sPage;
      this.page.loading = true;
      this.$axios.get('/api/bjk/bjkList', {
        page, size, type, userId: this.$store.state.userInfo.userId
      }).then(res => {
        if(type != this.page.type) return ;
        let json = res || {}; 
        let list = json.list || [];
        this.list.push( ...list );
        let finished = json.isLastPage ? true : false;
        this.page = { ...sPage, page: sPage.page + 1, loading: false, finished };
        if (type == 2) {
          this.$nextTick(() => {
            this.list.forEach((ele, index) => {
              new QRCode('qrcode' + index, { width: 100, height: 100, text: ele.sn });
            });
          });
        }
      }).catch(err => {
        this.page = { ...sPage, loading: false, finished: true };
      });
    },
    lookDetail() {
      
    }
  },
  mounted() { 
    this.searchFunc();
  }
};
</script>

<style lang="less">
</style>
